<template>
    <div class="searchDialog">
        <el-dialog title="高级查询选择器" :visible.sync="dialogSearchVisible">
            <div class="form">
                <el-form :inline="true" :model="searchFormInline" class="demo-form-inline">
                    <el-form-item label="过滤条件匹配:">
                        <el-select v-model="searchFormInline.andOr">
                            <el-option label="AND（所有条件都要求匹配）" value="and"></el-option>
                            <el-option label="OR（条件中的任意一个匹配）" value="or"></el-option>
                        </el-select>
                    </el-form-item>

                    <!-- 表单 -->
                    <div>
                        <el-form-item>
                            <el-select v-model="searchFormInline.info" placeholder="选择查询字段">
                                <el-option label="用户账号" value="1"></el-option>
                                <el-option label="用户姓名" value="2"></el-option>
                                <el-option label="用户性别" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="searchFormInline.way">
                                <el-option v-for="item in wayList" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="searchFormInline.inputText" placeholder="请输入值">
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <div class="button">+</div>
                        </el-form-item>
                        <el-form-item>
                            <div class="button">-</div>
                        </el-form-item>

                    </div>


                </el-form>
            </div>
            <div class="bottom">
                <div class="dialog-footer left">
                    <el-button>重置</el-button>
                    <el-button>保存查询条件</el-button>
                </div>
                <div class="dialog-footer right">
                    <el-button>关闭</el-button>
                    <el-button type="primary" @click="dialogSearch">查询</el-button>
                </div>
                <div class="clear"></div>
            </div>

        </el-dialog>

    </div>
</template>
<script>

export default {
    data() {
        return {
            dialogSearchVisible: false,
            searchFormInline: {
                andOr: '1',
                info: '',
                way: '1',
                inputText: ''
            },
            wayList: [
                { label: '等于', value: '1' },
                { label: '包含', value: '2' },
                { label: '以..开始', value: '3' },
                { label: '以..结尾', value: '4' },
                { label: '在..中', value: '5' },
                { label: '不等于', value: '6' },
                { label: '大于', value: '7' },
                { label: '大于等于', value: '8' },
                { label: '小于', value: '9' },
                { label: '小于等于', value: '10' },
            ]
        }
    },
    methods: {
        // 打开dialog
        openDialog() {
            this.dialogSearchVisible = true
        },
        // 往父组件传and 和 or状态
        dialogSearch(){
            this.$emit('andOr',this.searchFormInline.andOr)
        }
    }
}
</script>
<style>
.searchDialog .el-dialog {
    width: 1000px
}

.searchDialog .button {
    width: 40px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #dcdfe6;
    font-weight: bold;
    font-size: 30px;
    line-height: 30px;
    height: 40px;

}

.searchDialog .button:hover {
    cursor: pointer;
}

.searchDialog .bottom {
    border-top: 1px solid #dcdfe6;
    padding-top: 10px
}

.searchDialog .el-dialog__body {
    padding: 30px 0
}
.searchDialog .form,.searchDialog .bottom{
    padding-left: 20px
}
.searchDialog .form{
    margin-bottom: 50px
}
</style>